<template>
  <div class="showboard flex-col-center-start" ref="showboard">
<!--    行-->
    <div  v-for="(lst,index) in computedList"
          :key="index"
          class="showboard-row width-100-percent"
    >
<!--      中文列-->
      <div v-if="computedTextType" class="flex-row-start-center flex-wrap width-100-percent" >
        <Hanzi :han-zi="computedText(chr)"
               v-for="(chr,i) in  lst"
               :style="{fontSize:(fontSize || 20)+'px'}"
               :key="i"
               :class="[computedActive(index,i),'item']"
        ></Hanzi>
      </div>
<!--      英文列-->
      <div v-if="!computedTextType"  class="flex-row-start-center flex-wrap width-100-percent">
        <Eng
            :class="[computedActive(index,i),'item']"
            v-for="(chr,i) in  lst"
            :key="i"
            :style="{fontSize:(fontSize || 20)+'px'}"
            :eng="computedText(chr)">

        </Eng>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">

import {computed, defineProps,ref, watch} from 'vue'

import {RecordItem} from "@/ts/record";
import Hanzi from "@/components/char/Hanzi.vue";
import Eng from "@/components/char/Eng.vue";
import {getOneDimensionalIndex, getTwoDimensionalIndex, parseTwoDimensionalArray} from "@/utils/ArrayUtil";
// 特殊字符映射,不需要特殊处理的字符不用放，仅存放需要特殊处理的字符
let specialCharMap=new Map([
  [" ","_"],
  ["\n","⏎"]
])
// 每行显示的列数
let showCol=ref(10)
// 英文显示行数
let engCol=20
// 中文显示行数
let chineseCol=10

let props=defineProps<{
  fontSize?:number
  currIndex:number,
  textList:Array<RecordItem>
}>()

let showboard=ref()

function scrollNextLine(lineNum:number){
  // TODO 根据当前打字进度滚动，当前采用方法：每输入showCol个字（固定）移动lineNum行，看情况优化

  // 文字dom对象数组
  let refList=showboard.value.children[0].children
  // 单个文字的高度
  let height=refList[0].clientHeight
  //  每次偏移lineNum行高度
  // let offset=Math.floor(index/showCol.value)*height
  showboard.value.scrollTop+=lineNum*height
}

/**
 *  显示内容随打字进度滚动
 *  每次打到开头，下降一次
 *
 * */
watch(()=>props.currIndex,(index)=>{
  // let twoDimensionalIndex = getTwoDimensionalIndex(index,computedList.value);

  // 如果列索引在开头
  if( index % showCol.value === 0){
    scrollNextLine(1)
  }

})



let computedText=computed(()=>{
  return (chr:RecordItem)=>{
    let text = chr.value;
    // 特殊字符map有就返回特殊字符，没有就返回原字符
    let recordValue=specialCharMap.has(text)?specialCharMap.get(text):text
    return {
      value:recordValue,
      status:chr.status
    }
  }
})

let computedList=computed(()=>{
  // 一维数组转二维数组
  return  parseTwoDimensionalArray<RecordItem>(props.textList,showCol.value,(item,index)=>{
    return item.value === '\n'
  });
})

let computedActive=computed(()=>{
  return (rowIndex:number,colIndex:number)=>{
    return props.currIndex === getOneDimensionalIndex(rowIndex,colIndex,computedList.value) ? 'active':''
  }
})

function isChinese(str:string) {
  // 使用Unicode编码范围判断是否是中文字符
  return /^[\u4e00-\u9fa5]+$/.test(str);
}


// 中文true，英文false
let computedTextType=computed(()=>{
  if(props.textList && props.textList.length > 0){
    return isChinese(props.textList[0].value)
  }
  return false
})

watch(computedTextType,(newV)=>{
  // 通过计算中、英文类型 -> 修改默认列数 (computedTextType true为中文，false为英文)
  showCol.value=newV?chineseCol:engCol
},{immediate:true})
</script>

<style scoped lang="less">
.showboard{
  width: 100%;
  height: 70vh;
  padding: 20px;
  overflow-y: scroll;
  scroll-behavior: smooth;

  .showboard-row{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    .item{
      position: relative;
      border: 2px solid transparent;
    }
    .active{
      &:before{
        content:"";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translateY();
        animation: blink 0.8s ease-in-out infinite alternate;
      }

    }
  }


}
@keyframes blink{
  50%{
    border-bottom: 3px solid black;
  }
  100%{
    border-bottom: 3px solid transparent;
  }
}
::-webkit-scrollbar {
  //滚动条整体样式,高宽分别对应横竖滚动条的尺寸
  width: 0;
  height: 13px;
}
//::-webkit-scrollbar-thumb {
//  //!*滚动条里面小方块*!*/
//
//  border-radius: 10px;
//  //-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//  background: white;
//
//}
//::-webkit-scrollbar-track {
//  //!*滚动条里面轨道*!*/
//  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//  border-radius: 10px;
//  background: white;
//}
</style>